import React, { useState, useEffect } from 'react';
import _ from 'lodash';
import Pagination from '@mui/material/Pagination';
import Stack from '@mui/material/Stack';

import TextField from '@mui/material/TextField';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormHelperText from '@mui/material/FormHelperText';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';

export const BasicPagination = (props) => {
    const {
        total,
        variant,
        shape,
        size,
        page,
        rowsPerPage,
        defaultPage,
        rowsPerPageOptions,
        showFirstButton,
        showLastButton,
        onPageChange,
        onRowsPerPageChange
    } = props;

    const [perPage, setPerPage] = useState(rowsPerPage || 10);

    const count = Math.ceil(total/perPage);

    // 每页显示的条数
    const handlePerPageChange = (event) => {
        onRowsPerPageChange(event, event.target.value)
        setPerPage(event.target.value);
    };

    // 页码跳转
    const handleJumPageChange = (event) => {
        console.log(isNaN(event.target.value))
        onPageChange(event, Number(event.target.value))
    };

    useEffect(() => {
    }, []);

    return total > 10 && (
        <Stack sx={{ width: '100%' }} spacing={2}>
            <div className="is-flex is-align-items-center is-justify-content-end flex items-center">
                <Pagination
                    color="primary"
                    count={count}
                    variant={variant}
                    shape={shape}
                    size={size}
                    page={page}
                    defaultPage={defaultPage}
                    showFirstButton={showFirstButton}
                    showLastButton={showLastButton}
                    onChange={onPageChange}
                />
                <FormControl sx={{ m: 1, minWidth: '5rem' }} size="small" className="mx-0 my-0">
                    <Select
                        value={perPage}
                        onChange={handlePerPageChange}
                        displayEmpty
                        inputProps={{ "aria-label": "Without label" }}
                    >{_.map(rowsPerPageOptions || [10 , 20, 30, 40], option => <MenuItem key={option} value={option}>{option}</MenuItem>) }
                    </Select>
                </FormControl>
                <span className="flex items-center" style={{margin: "0px 6px 0px 20px"}}>跳至</span>
                <TextField
                    id="jumper-page"
                    style={{maxWidth: "5rem"}}
                    className="w-80"
                    size="small"
                    onBlur={handleJumPageChange}
                />
                <span className="flex items-center" style={{marginLeft: "6px"}}>页</span>
            </div>
        </Stack>
    );
}


export const ShowPagination = () => {
    return (
        <Stack spacing={2}>
            <Pagination count={10} color="primary" />
            <Pagination count={10} color="primary" />
            <Pagination count={10} color="secondary" />
            <Pagination count={10} disabled />
        </Stack>
    );
}